<template>
  <view class="wanlshop-info-container">
    <view class="edgeInsetTop"></view>
    <view class="wanlshop-info-container__main bg-white">
      <view class="margin-left-bj shopuser">
        <view
          class="cu-avatar round margin-right-bj"
          :style="{ backgroundImage: 'url(' + $wanlshop.oss(shopData.avatar, 52, 52, 2, 'avatar') + ')' }"
        ></view>
        <view class="">
          <view class="text-df text-cut" style="width: 320rpx">
            <text>{{ shopData.shopname || '加载中...' }}</text>
          </view>
          <view class="wanl-gray text-min">粉丝数 {{ shopData.find_user.fans }}</view>
          <view class="wanl-gray text-min">{{ shopData.city }}</view>
        </view>
      </view>
      <view class="margin-right-bj">
        <button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm" @click.stop="handleFollow">
          <text class="wlIcon-tianjia margin-right-xs text-bold"></text>关注
        </button>
        <button v-else class="cu-btn radius-bock text-sm" @click.stop="handleFollow">
          <text class="wlIcon-31xuanze margin-right-xs text-bold"></text>已关注
        </button>
      </view>
    </view>
    <view class="shop_info bg-white margin-top-bj padding-lr-bj">
      <view class="padding-tb-bj solid-bottom"> 店铺介绍 </view>
    </view>
    <view class="bg-white padding-bj">
      <rich-text :nodes="shopData.bio"></rich-text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopData: {
        id: 0,
        avatar: '',
        shopname: '',
        state: 0,
        islive: 0,
        isself: 0,
        find_user: {
          user_no: '',
          fans: 0,
        },
      },
    };
  },
  onLoad(option) {
    this.loadData(option.id);
  },
  methods: {
    async loadData(shop_id) {
      this.$api.get({
        url: '/wanlshop/shop/getShopInfo',
        data: {
          id: shop_id,
        },
        success: res => {
          res.bio = res.bio.replace(/<img/g, "<img style='display: block;'");
          this.shopData = res;
        },
      });
    },
    async handleFollow() {
      if (this.$store.state.user.isLogin) {
        this.$api.post({
          url: '/wanlshop/find/user/setFindUser',
          data: {
            id: this.shopData.find_user.user_no,
            type: 'follow',
          },
          success: res => {
            let concern = this.$store.state.statistics.dynamic.concern;
            if (res.data === 0) {
              concern -= 1;
              this.shopData.find_user.fans -= 1;
            } else {
              concern += 1;
              this.shopData.find_user.fans += 1;
            }
            this.$store.commit('statistics/dynamic', {
              concern: concern,
            });
            this.shopData.isFollow = res.data;
          },
        });
      } else {
        this.$wanlshop.to('/pages/user/auth/auth');
      }
    },
  },
};
</script>

<style lang="scss">
.wanlshop-info-container {
  &__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 200rpx;
    .cu-avatar {
      width: 120rpx;
      height: 120rpx;
    }
    .shopuser {
      display: flex;
      align-items: center;
    }
  }
}
</style>
